<!--
 * Copyright (c) 2013-Now http://jeesite.com All rights reserved.
 * No deletion without permission, or be held responsible to law.
 * @author Vben、ThinkGem
-->
<template>
  <div style="width: 100%">
    <div v-if="$slots.headerTop" :class="`${prefixCls}__header-top text-lg font-bold` ">
      <slot name="headerTop"></slot>
    </div>
    <div class="flex items-center">
      <div :class="`${prefixCls}__title`">
        <slot name="tableTitle" v-if="$slots.tableTitle"></slot>
        <TableTitle :helpMessage="titleHelpMessage" :title="title" v-if="!$slots.tableTitle && title" />
      </div>
      <div :class="`${prefixCls}__left-toolbar`">
        <slot name="leftToolbar"></slot>
      </div>
      <div :class="`${prefixCls}__toolbar`">
        <slot name="toolbar"></slot>
        <!-- <Divider type="vertical" v-if="$slots.toolbar && showTableSetting" /> -->
        <TableSetting :setting="tableSetting" v-if="showTableSetting" @columns-change="handleColumnChange" />
      </div>
    </div>
    <slot name="tableTop"></slot>
  </div>
</template>
<script lang="ts">
import type { TableSetting, ColumnChangeParam } from '../types/table';
import type { PropType } from 'vue';
import { defineComponent } from 'vue';
// import { Divider } from 'ant-design-vue';
import TableSettingComponent from './settings/index.vue';
import TableTitle from './TableTitle.vue';
import { useDesign } from '/@/hooks/web/useDesign';

export default defineComponent({
  name: 'BasicTableHeader',
  components: {
    // Divider,
    TableTitle,
    TableSetting: TableSettingComponent,
  },
  props: {
    title: {
      type: [Function, String] as PropType<string | ((data: Recordable) => string)>,
    },
    tableSetting: {
      type: Object as PropType<TableSetting>,
    },
    showTableSetting: {
      type: Boolean,
    },
    titleHelpMessage: {
      type: [String, Array] as PropType<string | string[]>,
      default: '',
    },
  },
  emits: ['columns-change'],
  setup(_, { emit }) {
    const { prefixCls } = useDesign('basic-table-header');
    function handleColumnChange(data: ColumnChangeParam[]) {
      emit('columns-change', data);
    }
    return { prefixCls, handleColumnChange };
  },
});
</script>
<style lang="less">
@prefix-cls: ~'jeesite-basic-table-header';

.@{prefix-cls} {
  &__title {
    font-size: 16px;

    .anticon {
      color: @primary-color;
    }

    >.ant-tabs {
      & .ant-tabs-tab {
        padding: 4px 0;
        margin-left: 5px;

        &+.ant-tabs-tab {
          margin: 0 0 0 15px;
        }

        .ant-tabs-tab-btn {
          .anticon {
            margin-left: 3px;
            margin-right: 8px;
          }
        }

        .ant-tabs-tab-btn,
        .ant-tabs-tab-btn .anticon {
          color: fade(@text-color-base, 60);
          font-size: 16px;
          text-shadow: none;
        }

        &.ant-tabs-tab-active {

          .ant-tabs-tab-btn,
          .ant-tabs-tab-btn .anticon {
            color: fade(@primary-color, 90);
          }
        }
      }
    }

    >.ant-tabs-top,
    >.ant-tabs-bottom {

      &>.ant-tabs-nav,
      &>div>.ant-tabs-nav {
        margin: 0;
      }
    }

    >.ant-tabs-top {

      // margin-bottom: -15px;
      &>.ant-tabs-nav {
        &::before {
          border-bottom: 0;
        }
      }
    }

    >.ant-tabs-card .ant-tabs-nav {
      margin: 0;

      &-list {
        .ant-tabs-tab {
          padding: 5px 8px;
          border-bottom: 0;
          color: @text-color-call-out;

          .anticon {
            color: @text-color-call-out;
          }

          &-active {
            .anticon {
              color: @primary-color;
            }
          }
        }
      }
    }
  }

  &__toolbar {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;

    >* {
      margin-right: 8px;
    }

    .ant-btn {
      // border-radius: 4px;
      padding: 2px 10px;
      line-height: 1.5;
      height: 30px;
      margin-top: 2px;
    }
  }

  &__left-toolbar {
    display: flex;
    align-items: center;

    >* {
      margin-right: 8px !important;
    }

    .ant-btn,
    .ant-input,
    .ant-input-affix-wrapper,
    .ant-input-password {
      border-radius: 2px;

    }
  }

  &__header-top {
    margin: 16px auto;
  }
}
</style>
